<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title></title>
	<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css"/>
	<link href="css/style.css" rel="stylesheet" type="text/css"/>
	<link href="css/responsive-style.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="scripts/jquery-ui-1.10.2.min.js"></script>
	<script type="text/javascript" src="scripts/jquery-colors-min.js"></script>
	<script type="text/javascript" src="scripts/date.js"></script>
	<script type="text/javascript" src="scripts/jquery.date-picker.js"></script>
	<script type="text/javascript" src="scripts/jquery.mCustomScrollbar.concat.min.js"></script>
	<script type="text/javascript" src="scripts/effect.js"></script>
</head>
<body>
<div class="page">
<div class="menu">
<ul class="menu-list">
	<li class="menu-item home"><a href="#">Trang chủ</a></li>
	<li class="menu-item menu-group acc" id="acc"><a href="#">Tài khoản</a>

		<div class="menu-arrow"></div>
	</li>
	<li class="menu-item menu-group cate" id="cate"><a href="#">Thể loại</a>

		<div class="menu-arrow"></div>
	</li>
	<li class="menu-item menu-group day" id="day"><a href="#">BXH Ngày</a>

		<div class="menu-arrow"></div>
	</li>
	<li class="menu-item menu-group week" id="week"><a href="#">BXH Tuần</a>

		<div class="menu-arrow"></div>
	</li>

</ul>
<div class="menu-popup" id="menu-popup">

<div class="menu-popup-form acc">
	<ul class="menu-popup-list">
		<li class="menu-popup-item simple" id="btnLogin">Đăng nhập</li>
		<li class="menu-popup-item simple" id="btnRegis">Đăng kí</li>
	</ul>
	<div class="menu-popup-profile" style="display: none;">
		<div class="form-head-profile">

			<div class="popup-profile-avt" style="background-image:url('images/resource/avt0.jpg')"></div>
			<div class="popup-profile-name">Username</div>
		</div>
	</div>
</div>
<div class="menu-popup-form cate">
	<ul class="menu-popup-list">
		<li class="menu-popup-item simple">Giải trí</li>
		<li class="menu-popup-item simple">Âm nhạc</li>
		<li class="menu-popup-item simple">Làm thế nào</li>
		<li class="menu-popup-item simple">Khoa học</li>
		<li class="menu-popup-item simple">Thế giới tự nhiên</li>
		<li class="menu-popup-item simple">Thể thao</li>
		<li class="menu-popup-item simple">Tâm lý người</li>
		<li class="menu-popup-item simple">Máy tính</li>
		<li class="menu-popup-item simple">Giao tiếp</li>
		<li class="menu-popup-item simple">Dành cho trẻ em</li>
		<li class="menu-popup-item simple">Thế giới</li>
		<li class="menu-popup-item simple">Khi yêu</li>
	</ul>
</div>
<div class="menu-popup-form day">
	<div class="menu-popup-head">
		<div class="menu-popup-calendar">
			<div class="menu-popup-calendar-current">
				<i class="menu-popup-icon calendar-date"></i>
				<input readonly="readonly" type="text" class="date-pick" value="28/05/2013"/>
			</div>
		</div>
	</div>
	<ul class="menu-popup-list special" id="rank-list-day">
		<li class="menu-popup-item odd">
			<span class="menu-popup-num">1</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item">
			<span class="menu-popup-num">2</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item odd">
			<span class="menu-popup-num">3</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
			<span class="menu-popup-user">Name3</span>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item">
			<span class="menu-popup-num">4</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item odd">
			<span class="menu-popup-num">5</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item">
			<span class="menu-popup-num">6</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item odd">
			<span class="menu-popup-num">7</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item">
			<span class="menu-popup-num">8</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item">
			<span class="menu-popup-num">4</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item odd">
			<span class="menu-popup-num">5</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item">
			<span class="menu-popup-num">6</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item odd">
			<span class="menu-popup-num">7</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item">
			<span class="menu-popup-num">8</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item">
			<span class="menu-popup-num">4</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item odd">
			<span class="menu-popup-num">5</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item">
			<span class="menu-popup-num">6</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item odd">
			<span class="menu-popup-num">7</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item">
			<span class="menu-popup-num">8</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item odd">
			<span class="menu-popup-num">9</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item">
			<span class="menu-popup-num">10</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
	</ul>
</div>
<div class="menu-popup-form week">
	<div class="menu-popup-head">
		<div class="menu-popup-calendar">
			<div class="menu-popup-calendar-current">
				<i class="menu-popup-icon calendar-week"></i>
				<input readonly="readonly" type="text" class="date-pick week" value="28/05/2013"/>
			</div>
		</div>
	</div>
	<ul class="menu-popup-list special" id="rank-list-week">
		<li class="menu-popup-item odd">
			<span class="menu-popup-num">1</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item">
			<span class="menu-popup-num">2</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item odd">
			<span class="menu-popup-num">3</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
			<span class="menu-popup-user">Name3</span>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item">
			<span class="menu-popup-num">4</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item odd">
			<span class="menu-popup-num">5</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item">
			<span class="menu-popup-num">6</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item odd">
			<span class="menu-popup-num">7</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item">
			<span class="menu-popup-num">6</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item odd">
			<span class="menu-popup-num">7</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item">
			<span class="menu-popup-num">6</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item odd">
			<span class="menu-popup-num">7</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item">
			<span class="menu-popup-num">6</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
		<li class="menu-popup-item odd">
			<span class="menu-popup-num">7</span>
			<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
			<a href="" class="menu-popup-user">Name1</a>
			<span class="menu-popup-score">2000</span>
		</li>
	</ul>
</div>
</div>

</div>
<div class="form">
	<div class="form-head">
		<span>Learning-English</span><span class="form-head-gray">Home</span>
	</div>

	<div class="panel-contact">
		<div class="profile-head">Recent Contact</div>
		<ul class="contact-list">
			<li class="contact-item active">
				<div class="contact-avt" style="background-image:url('images/resource/avt0.jpg')"></div>
				<div class="contact-info">
					<div class="contact-info-head">
						<span class="contact-name">H. Rackham</span>
						<span class="contact-time">12:03 AM</span>
					</div>
					<span class="contact-message">Sint occaecati cupiditate non provident, similique</span>
				</div>
			</li>
			<li class="contact-item">
				<div class="contact-avt" style="background-image:url('images/resource/avt1.jpg')"></div>
				<div class="contact-info">
					<div class="contact-info-head">
						<span class="contact-name">Mary</span>
						<span class="contact-time">12:03 AM</span>
					</div>
					<span class="contact-message">But in certain circumstances and owing to the claims
						of duty or the obligations :)</span>
				</div>
			</li>
			<li class="contact-item">
				<div class="contact-avt" style="background-image:url('images/resource/metro/m10.jpg')"></div>
				<div class="contact-info">
					<div class="contact-info-head">
						<span class="contact-name">Occur Ditate</span>
						<span class="contact-time">12:03 AM</span>
					</div>
					<span class="contact-message">Circumstances occur in which toil and pain can procure
						him some great pleasure.-_-</span>
				</div>
			</li>
			<li class="contact-item">
				<div class="contact-avt" style="background-image:url('images/resource/admin.gif')"></div>
				<div class="contact-info">
					<div class="contact-info-head">
						<span class="contact-name">Optio Cumque</span>
						<span class="contact-time">12:03 AM</span>
					</div>
					<span class="contact-message">To take a trivial example, which of us ever undertakes
						laborious physical exercise</span>
				</div>
			</li>
			<li class="contact-item">
				<div class="contact-avt" style="background-image: url('images/resource/avt0.jpg')"></div>
				<div class="contact-info">
					<div class="contact-info-head">
						<span class="contact-name">Tempore soluta</span>
						<span class="contact-time">12:03 AM</span>
					</div>
					<span class="contact-message">libero tempore, cum soluta nobis est eligendi optio cumque nihil
						impedit quo minus id quod maxime placeat facere possimus</span>
				</div>
			</li>
		</ul>
	</div>
	<div class="panel-message">
		<div class="profile-head">Message</div>
		<ul class="message-list">
			<li class="message-item friend">
				<div class="message-avt" style="background-image: url('images/resource/metro/m5.jpg')"></div>
				<div class="message-content">
					<div class="message-info">
						<span class="message-name">F. Possimus</span>
						<span class="message-time">20:02 PM</span>
					</div>
					<div class="message-text">
						libero tempore, cum soluta nobis est nus id quod maxime placeat facere possimus?? :(
					</div>
				</div>
			</li>
			<li class="message-item">
				<div class="message-avt" style="background-image: url('images/resource/avt0.jpg')"></div>
				<div class="message-content">
					<div class="message-info">
						<span class="message-name">Me</span>
						<span class="message-time">20:02 PM</span>
					</div>
					<div class="message-text">
						netus et malesuada fames ac turpis egestas ... tortor.
						? :D eligendi optio cumque hihi.. quo minus id quod maxime placeat facere possimus :D
					</div>
				</div>
			</li>
			<li class="message-item">
				<div class="message-avt" style="background-image: url('images/resource/avt0.jpg')"></div>
				<div class="message-content">
					<div class="message-info">
						<span class="message-name">Me</span>
						<span class="message-time">20:02 PM</span>
					</div>
					<div class="message-text">
						ok? :D
					</div>
				</div>
			</li>
			<li class="message-item friend">
				<div class="message-avt" style="background-image: url('images/resource/metro/m5.jpg')"></div>
				<div class="message-content">
					<div class="message-info">
						<span class="message-name">F. Possimus</span>
						<span class="message-time">20:02 PM</span>
					</div>
					<div class="message-text">
						libero tempore, cum soluta nobis est eligendi optio cumque nihil
						impedit quo minus placeat facere possimus :D
					</div>
				</div>
			</li>
			<li class="message-item">
				<div class="message-avt" style="background-image: url('images/resource/avt0.jpg')"></div>
				<div class="message-content">
					<div class="message-info">
						<span class="message-name">Me</span>
						<span class="message-time">20:02 PM</span>
					</div>
					<div class="message-text">
						Mauris vel lacus vitae felis vestibulum volutpat. :0
						Etiam est nunc, venenatis in,;) tristique eu, imperdiet ac, nisl.
					</div>
				</div>
			</li>
			<li class="message-item friend">
				<div class="message-avt" style="background-image: url('images/resource/metro/m5.jpg')"></div>
				<div class="message-content">
					<div class="message-info">
						<span class="message-name">F. Possimus</span>
						<span class="message-time">20:02 PM</span>
					</div>
					<div class="message-text">
						id quod maxime placeat tempore, :D
					</div>
				</div>
			</li>
			<li class="message-item friend">
				<div class="message-avt" style="background-image: url('images/resource/metro/m5.jpg')"></div>
				<div class="message-content">
					<div class="message-info">
						<span class="message-name">F. Possimus</span>
						<span class="message-time">20:02 PM</span>
					</div>
					<div class="message-text">
						Etiam est nunc, venenatis in,;) tristique eu,
						id quod maxime placeat tempore, :D
					</div>
				</div>
			</li>
		</ul>
		<div class="message-compose">
			<textarea class="message-input" id="message-input"></textarea>

			<div class="message-control">
				<div class="message-control-avt" style="background-image: url('images/resource/avt0.jpg')"></div>
				<div class="message-control-quote"></div>
				<a class="message-btn-send">Send</a>

				<div class="message-control-emoticon">
					<div class="message-emo-popup">
						<ul class="emo-list">
							<li class="emo-item">:))</li>
							<li class="emo-item">:)</li>
							<li class="emo-item">:p</li>
							<li class="emo-item">:(</li>
							<li class="emo-item">;)</li>
							<li class="emo-item">:D</li>
							<li class="emo-item">B)</li>
							<li class="emo-item">X(</li>
							<li class="emo-item"></li>
							<li class="emo-item">:o</li>
							<li class="emo-item">:s</li>
							<li class="emo-item">:|</li>
							<li class="emo-item">:\</li>
						</ul>
					</div>
				</div>
			</div>

		</div>
	</div>
    <div class="panel-friend">
        <div class="profile-head">Friends</div>
        <ul class="friend-list">
            <li class="friend-item">
                <div class="friend-avt" style="background-image: url('images/resource/metro/m5.jpg')"></div>
                <span class="friend-name">Soluta Nobis</span>
            </li>
            <li class="friend-item">
                <div class="friend-avt" style="background-image: url('images/resource/metro/m7.jpg')"></div>
                <span class="friend-name">Quod Maxime</span>
            </li>
            <li class="friend-item">
                <div class="friend-avt" style="background-image: url('images/resource/metro/m9.jpg')"></div>
                <span class="friend-name">Thosi Soime</span>
            </li>
            <li class="friend-item">
                <div class="friend-avt" style="background-image: url('images/resource/metro/m1.jpg')"></div>
                <span class="friend-name">Soluta Lorem</span>
            </li>
            <li class="friend-item">
                <div class="friend-avt" style="background-image: url('images/resource/metro/m2.jpg')"></div>
                <span class="friend-name">Ipsum Maxime</span>
            </li>
            <li class="friend-item">
                <div class="friend-avt" style="background-image: url('images/resource/metro/m4.jpg')"></div>
                <span class="friend-name">Thosi Soime</span>
            </li>
        </ul>
    </div>

</div>
</div>
</body>
</html>